<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .body{
                border: 2px blue solid;
                width: 700px;
                height: 700px;
                background-image: url("炸弹背景.jpg");
                background-size: 100%;
                background-repeat: no-repeat;
                margin: 0 auto;
            }
            .body_nei{
                border: 0px solid;
                border-color: rgb(92,68,72);
                width: 320px;
                height: 200px;
                margin: 215px 225px;
                /*font-size: 60px;*/
                /*text-align: center;*/
                line-height: 140px;
                background-color: rgb(108, 126, 16);
                border-radius: 20px;
            }
            .body_nei1{
                border: 0px solid;
                border-color: rgb(92,68,72);
                width: 55px;
                height: 200px;
                /*margin: 215px 229px;*/
                /*font-size: 60px;*/
                /*text-align: center;*/
                line-height: 140px;
                background-color: #728008;
                float: left;
                border-radius: 20px;

            }
            .bddy_nei2{
                border: 0px solid;
                border-color: rgb(92,68,72);
                width: 265px;
                height: 200px;
                /*margin: 215px 229px;*/
                /*font-size: 60px;*/
                /*text-align: center;*/
                line-height: 140px;
                background-color: gray;
                float: left;
                border-radius: 20px;
            }
            .time{
                width: 265px;
                height: 120px;
                font-size: 60px;
                text-align: center;
                background-color: rgb(64,4,4);
                color: red;
                float: left;
                border-radius: 20px;
            }
            .hong{
                width: 50px;
                height: 50px;
                float: left;
                border-radius: 50%;
                background-color: red;
                overflow: hidden;
                margin: 13px 15px;
            }
            .lan{
                width: 50px;
                height: 50px;
                float: left;
                border-radius: 50%;
                background-color: blue;
                overflow: hidden;
                margin: 13px 15px;
            }
            .huang{
                width: 50px;
                height: 50px;
                float: left;
                border-radius: 50%;
                background-color: yellow;
                overflow: hidden;
                margin: 13px 15px;
            }
            .hong_lin{
                width: 54px;
                height: 5px;
                float: left;
                margin-top: 40px;
                background-color: #EA4335;
                color: red;
            }
            .lan_lin{
                width: 54px;
                height: 5px;
                float: left;
                margin-top: 40px;
                background-color: #3fea0d;
                color: green;
            }
            .hei_lin{
                width: 54px;
                height: 5px;
                float: left;
                margin-top: 40px;
                background-color: #060304;
                color: black;
            }
        </style>
    </head>
    <body>
        <div class="body">
            <div class="body_nei">
                <div class="body_nei1">
<!--                    <input class="hong_lin" type="submit" value="红线">-->
<!--                    <input class="lan_lin" type="submit" value="绿线">-->
<!--                    <input class="hei_lin" type="submit" value="黑线">-->
                    <div class="hong_lin"></div>
                    <div class="lan_lin"></div>
                    <div class="hei_lin"></div>
                </div>
                <div class="bddy_nei2">
                    <div class="time" id="time">
                    </div>
                    <div class="hong">
                    </div>
                    <div class="lan">
                    </div>
                    <div class="huang">
                    </div>
                </div>
            </div>
        </div>
    <script>
        var time = document.getElementById("time");
        var hong = document.getElementsByClassName("hong")[0];
        var lan = document.getElementsByClassName("lan")[0];
        var huang = document.getElementsByClassName("huang")[0];
        var hong_lin = document.getElementsByClassName("hong_lin")[0];
        var lan_lin = document.getElementsByClassName("lan_lin")[0];
        var hei_lin = document.getElementsByClassName("hei_lin")[0];
        time.innerText = "00:00:10";
        var number = 10;
        var color1 = "red"
        var color2 = "blue"
        var color3 = "yellow"
        var interval = setInterval(
            function (ev){
                if (number<10){
                    t = '0'+ number
                }
                else{
                    t =number
                }
                time.innerText = "00:00:"+t
                if(number == 0){
                    clearInterval(interval)
                }else{
                    number-=1
                }
            },1000
        )
        interval1 = setInterval(
            function (ev) {
                if (color1=="red"){
                    color1 = "gray"
                }else {
                    color1 = "red"
                }
                if (number==0){
                    color1 = "red"
                }else {
                    hong.style.backgroundColor = color1
                }
            },300
        )
        // interval2 = setInterval(
        //     function (ev) {
        //         if (color2=="blue"){
        //             color2 = "gray"
        //         }else {
        //             color2 = "blue"
        //         }
        //         if (number==0){
        //             color2 = "blue"
        //         }else {
        //             lan.style.backgroundColor = color2
        //         }
        //     },500
        // )
        // interval3 = setInterval(
        //     function (ev) {
        //         if (color3=="yellow"){
        //             color3 = "gray"
        //         }else {
        //             color3 = "yellow"
        //         }
        //         if (number==0){
        //             color3 = "yellow"
        //         }else {
        //             huang.style.backgroundColor = color3
        //         }
        //     },1000
        // )
        
    </script>
    </body>
</html>